<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <el-row>

        <el-col :span="3"  class="center">
          <el-avatar shape="square" :size="100"
                     :src="avatar" class="avatar"></el-avatar>
        </el-col>

        <el-col :span="12">
          <template>
            <el-table
                :data="tableData"
                style="width: 100%">

              <el-table-column
                  prop="username"
                  label="账号"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="nickname"
                  label="昵称"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="deptname"
                  label="所属部门">
              </el-table-column>
              <el-table-column
                  prop="rolename"
                  label="用户角色">

             <template slot-scope="scope">
               <el-dropdown placement="bottom">
                  <span class="el-dropdown-link">
                    {{scope.row.rolename[0]}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item v-for="(item,index) in scope.row.rolename" :key="index">{{ item }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
              </el-table-column>


            </el-table>
          </template>

        </el-col>
      </el-row>


    </el-card>


  </div>

</template>

<script>
import {getUserById} from "@/network/system/user";

export default {
  name: "welcome",
  data() {
    return {
      tableData: [],//用户信息
      avatar: ''
    }
  }, computed: {},
  created() {

    getUserById(this.$store.getters.id).then((res) => {
      console.log(res)
      this.tableData.push(res.data.user)
      this.avatar = res.data.user.avatar
    })

  }


}
</script>

<style scoped>
.center{
  display:flex;
  justify-content:center;/*主轴上居中*/
  align-items:center;/*侧轴上居中*/
}

.avatar{
margin-right: 30px;
}
</style>